<template>
  <div class="">
    <el-row
      type="flex"
      :gutter="0"
      justify="space-between"
      style="width: 100vw; height: 100vh; box-sizing: border-box"
    >
      <el-col :span="1" :xs="4" :sm="1" :md="1" :lg="1" :xl="1">
        <el-menu collapse>
          <el-submenu index="1">
            <template slot="title" class="center"
              ><img class="icon" src="@img/room_manage.svg" alt=""
            /></template>
            <el-menu-item @click="m_Rooms" index="1-1">阅览室</el-menu-item>
            <el-menu-item index="1-2" @click="m_addRoom"
              >添加阅览室</el-menu-item
            >
          </el-submenu>
          <el-submenu index="2">
            <template slot="title" class="center"
              ><img class="icon" src="@img/user_manage.svg" alt=""
            /></template>
            <el-menu-item index="2-1" @click="m_checkUsers">用户</el-menu-item>
            <el-menu-item index="2-2" @click="m_addUser">添加用户</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title" class="center"
              ><img class="icon" src="@img/notice.svg" alt=""
            /></template>
            <el-menu-item index="3-2" @click="m_checkNotice">公告</el-menu-item>
            <el-menu-item index="3-1" @click="m_postNotice"
              >发布公告</el-menu-item
            >
          </el-submenu>
          <el-submenu index="4">
            <template slot="title" class="center"
              ><img class="icon" src="@img/library_manage.svg" alt=""
            /></template>
            <el-menu-item index="4-1" @click="m_feedback">意见箱</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="23" :xs="20" :sm="23" :md="23" :lg="23" :xl="23">
        <el-header class="bar" height="40px">
          <div class="notice">{{ notice }}</div>
          <el-dropdown size="medium" @command="handleCommand">
            <i class="el-icon-setting" style="margin-right: 5px"></i>

            <span class="name">{{ userInfo.username }}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出系统</el-dropdown-item>
              <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <setting-pwd v-if="setPwd" @done="setPwd = false" />
        <el-main>
          <div v-if="$route.name === 'Manager'" class="calender">
            <el-calendar></el-calendar>
          </div>
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SettingPwd from "../User/SettingPwd";

import { mapMutations, mapState } from "vuex";

export default {
  components: { SettingPwd },
  name: "Manager",
  data() {
    return {
      setPwd: false,
    };
  },
  computed: {
    ...mapState(["userInfo", "notice"]),
  },
  watch: {},
  methods: {
    ...mapMutations(["logout"]),
    async userLogout() {
      this.$confirm("确认退出系统?", "退出系统", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "info",
      })
        .then(() => {
          this.logout();
          this.$router.push("/login");
          this.$message.success("成功退出");
        })
        .catch(() => {
          this.$message.warning("已取消");
        });
    },
    handleCommand(command) {
      if (command === "logout") {
        this.userLogout();
      } else if (command === "changePwd") {
        this.setPwd = true;
      }
    },

    //阅览室

    m_Rooms() {
      if (this.$route.name != "m_Rooms") this.$router.push({ name: "m_Rooms" });
    },
    //添加阅览室

    m_addRoom() {
      if (this.$route.name != "m_addRoom")
        this.$router.push({ name: "m_addRoom" });
    },
    //查看用户

    m_checkUsers() {
      if (this.$route.name != "m_checkUsers")
        this.$router.push({ name: "m_checkUsers" });
    },
    //添加用户

    m_addUser() {
      if (this.$route.name != "m_addUser")
        this.$router.push({ name: "m_addUser" });
    },

    //查看公告
    m_checkNotice() {
      if (this.$route.name != "m_checkNotice")
        this.$router.push({ name: "m_checkNotice" });
    },

    //发布公告

    m_postNotice() {
      if (this.$route.name != "m_postNotice")
        this.$router.push({ name: "m_postNotice" });
    },
    //意见箱
    m_feedback() {
      if (this.$route.name != "m_feedback")
        this.$router.push({ name: "m_feedback" });
    },
  },
  created() {
    if (this.isStudent) {
      this.$router.replace("/");
    }
  },
  mounted() {},
};
</script>
<style scoped>
.name {
  font-size: 1vw;
}

.icon {
  width: 24px;
  height: 24px;
  margin-right: 5px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bar {
  display: flex;
  justify-content: space-between;
  font-size: 1vw;
  line-height: 40px;
  background-color: rgb(238, 241, 246);
}

.calender {
  width: 580px;
}

.el-col >>> .el-menu {
  color: #333;
  height: 100vh;
  width: 100%;
}

>>> .el-calendar__header {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

@media screen and (max-width: 480px) {
  .calender {
    width: 270px;
  }
  .bar {
    font-size: 1vw;
  }
  >>> .el-calendar-table .el-calendar-day {
    height: 40px;
    width: 40px;
  }

  >>> *::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .questions-box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
  .questions-box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }
}

.el-submenu >>> .el-submenu__title {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
